<template>
  <div class="mimashezhi">
    <!-- 头部 -->
    <div class="demo-nav" style="">
      <button @click="fanhui">取消</button>
      <div class="demonav">设置密码</div>
      <button class="preser" @click="xiugai()">保存</button>
    </div>
    <!-- 内容 -->
    <van-form @submit="onSubmit">
      <van-field
        v-model="password1"
        type="password"
        name="密码"
        placeholder="原始密码"
        :rules="[{ required: true, message: '请填写原密码' }]"
      />
      <van-field
        v-model="password2"
        type="password"
        name="密码"
        placeholder="新密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
      <van-field
        v-model="password3"
        type="password"
        name="密码"
        placeholder="请确认新密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
    </van-form>
  </div>
</template>

<script>
import { PasswordAPI } from "../../api/setup";
export default {
  data() {
    return {
      password1: "",
      password2: "",
      password3: "",
    };
  },
  computed: {},
  watch: {},

  methods: {
    fanhui() {
      this.$router.push("/account-security");
    },
    async xiugai() {
      let oldPassword = this.password1; //获取原密码
      let password = this.password2; //获取新密码
      console.log(this.password1, this.password2);

      //判断原密码是否和新密码是否一样
      if (oldPassword == password) {
        alert("新密码不能和原密码一样");
      } else {
        if (password == this.password3) {
          const result = await PasswordAPI({ oldPassword, password });
          if (result.code == "success") {
            alert("修改成功");
            this.$router.push("/account-security");
          }
        } else {
          alert("请确认两次新密码的一致");
        }
      }
    },

    onSubmit(values) {
      console.log("submit", values);
    },
  },
  created() {},
  mounted() {},
  components: {},
};
</script>
<style scoped>
/* 头部 */
.demo-nav {
  width: 90%;
  height: 45px;
  background-color: #fff;
  position: relative;
  margin: 0 auto;
  display: flex;
  line-height: 45px;
  align-items: center;
  justify-content: space-between;
}
.demonav {
  font-size: 18px;
  font-weight: 800;
}
.preser {
  color: #959595;
}
.demo-nav button {
  font-size: 12px;
  background-color: #fff;
  border: none;
}
/* 底部 */
.van-form {
  width: 90%;
  margin: 50px auto 0;
}
.vant-form .van-field__control {
  width: 100%;
  height: 30px;
  border-right: none;
  border-left: none;
  border-top: none;
  border-bottom: 1px solid #ccc;
  font-size: 14px;
  margin: 10px 0;
}
</style>
